@import './variables.scss';
@import './element-variables.scss';

.m0 { margin: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.m  { margin: $margin-md !important; }
.ml { margin-left: $margin-md !important; }
.mr { margin-right: $margin-md !important; }
.mt { margin-top: $margin-md !important; }
.mb { margin-bottom: $margin-md !important; }

.m-sm  { margin: $margin-sm !important; }
.ml-sm { margin-left: $margin-sm !important; }
.mr-sm { margin-right: $margin-sm !important; }
.mt-sm { margin-top: $margin-sm !important; }
.mb-sm { margin-bottom: $margin-sm !important; }

.m-lg  { margin: $margin-lg !important; }
.ml-lg { margin-left: $margin-lg !important; }
.mr-lg { margin-right: $margin-lg !important; }
.mt-lg { margin-top: $margin-lg !important; }
.mb-lg { margin-bottom: $margin-lg !important; }

.m-xs { margin: $margin-xs !important; }
.ml-xs { margin-left: $margin-xs !important; }
.mr-xs { margin-right: $margin-xs !important; }
.mt-xs { margin-top: $margin-xs !important; }
.mb-xs { margin-bottom: $margin-xs !important; }

// Margin vertical / horizontal
.mv0 {  @extend .mt0;  @extend .mb0; }
.mh0 {  @extend .ml0;  @extend .mr0; }

.mv {  @extend .mt;  @extend .mb; }
.mh {  @extend .ml;  @extend .mr; }

.mv-lg { @extend .mt-lg; @extend .mb-lg; }
.mh-lg { @extend .ml-lg; @extend .mr-lg; }

.mv-sm { @extend .mt-sm; @extend .mb-sm; }
.mh-sm { @extend .ml-sm; @extend .mr-sm; }

.mv-xs { @extend .mt-xs; @extend .mb-xs; }
.mh-xs { @extend .ml-xs; @extend .mr-xs; }
// Paddings
// --------------------

.p0 { padding: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important; }

.p  { padding: $padding-md !important; }
.pl { padding-left: $padding-md !important; }
.pr { padding-right: $padding-md !important; }
.pt { padding-top: $padding-md !important; }
.pb { padding-bottom: $padding-md !important; }

.p-sm  { padding: $padding-sm !important; }
.pl-sm { padding-left: $padding-sm !important; }
.pr-sm { padding-right: $padding-sm !important; }
.pt-sm { padding-top: $padding-sm !important; }
.pb-sm { padding-bottom: $padding-sm !important; }

.p-lg  { padding: $padding-lg !important; }
.pl-lg { padding-left: $padding-lg !important; }
.pr-lg { padding-right: $padding-lg !important; }
.pt-lg { padding-top: $padding-lg !important; }
.pb-lg { padding-bottom: $padding-lg !important; }

.p-xs  { padding: $padding-xs !important; }
.pl-xs { padding-left: $padding-xs !important; }
.pr-xs { padding-right: $padding-xs !important; }
.pt-xs { padding-top: $padding-xs !important; }
.pb-xs { padding-bottom: $padding-xs !important; }


// Padding vertical / horizontal
.pv0 { @extend .pt0; @extend .pb0; }
.ph0 { @extend .pl0; @extend .pr0; }

.pv { @extend .pt; @extend .pb; }
.ph { @extend .pl; @extend .pr; }

.pv-xl { @extend .pt-xs; @extend .pb-xs; }
.ph-xl { @extend .pl-xs; @extend .pr-xs; }

.pv-lg { @extend .pt-lg; @extend .pb-lg; }
.ph-lg { @extend .pl-lg; @extend .pr-lg; }

.pv-sm { @extend .pt-sm; @extend .pb-sm; }
.ph-sm { @extend .pl-sm; @extend .pr-sm; }

//font-size,12~22
@for $i from 0 through 5 {
  $size: $font-size-base + $i*2;
  $sizeNum: 12 + $i*2;
  .fs-#{$sizeNum} {
    font-size: $size;
  }
}

//不换行
.text-nowrap {
  white-space: nowrap;
}

//数字换行
.text-break {
  word-break: break-all;
  word-wrap: break-word
}

.bg-primary{
  background-color: $--color-primary !important;
}
.bg-success{
  background-color: $--color-success !important;
}
.bg-warning{
  background-color: $--color-warning !important;
}
.bg-danger{
  background-color: $--color-danger !important;
}
.bg-muted{
  background-color: $menuText !important;
}
